Add data to HTML markup using Svelte 3

• First erase all the content from App.svelte and replace it with this content.

  HTML

  <script>
    let name = 'Your Name Goes Here'
  </script>
  
  <h1>Hello {name}!</h1>

• The variable inside of the curly braces should get rendered in your h1 tag when you switch back to your browser.

• The variable is a regular Javascript variable and so you can use other elements on it.

• Try using name.toUpperCase()

Up and running with Svelte 3

• Like regular HTML we can add styles to a component using the <style> tags

• Try adding some styles, maybe something other than Comic Sans

  HTML

  <style>
    .headerText {
      color: CornflowerBlue;
      font-family: 'Papyrus';
    }
  </style>
  
  <h1 class="headerText">Hello {name}!</h1>

  Previous      Next